<template>
  <div>
    <van-nav-bar
      title="用户信息"
      left-text="返回"
      left-arrow
      fixed
      @click.left.native="$router.go(-1)"
    >
    </van-nav-bar>
    <div class="body" v-if="user">
      <van-cell-group inset class="msg">
        <van-cell title="头像" value="内容" size="large" />
        <van-cell title="用户名" :value="user.data.unames" size="large" />
        <van-cell
          title="手机号"
          :value="user.data.phone"
          size="large"
          is-link
          to="/home/phone"
        />
        <van-field
          readonly
          clickable
          label="性别"
          :value="value"
          placeholder="选择性别"
          @click="showPicker = true"
          size="large"
        />
        <van-popup v-model="showPicker" position="bottom">
          <van-picker
            show-toolbar
            :columns="columns"
            @cancel="showPicker = false"
            @confirm="onConfirm"
          />
        </van-popup>
        <van-cell
          title="设置生日"
          :value="date"
          @click="show = true"
          size="large"
        />
        <van-calendar
          v-model="show"
          @confirm="onConfirmDate"
          color="#9bd602"
          :min-date="minDate"
          :max-date="maxDate"
        />
        <van-cell
          title="修改登录密码"
          value="点此修改"
          is-link
          size="large"
          to="/home/pwd"
        />
      </van-cell-group>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex"
export default {
  computed: {
    ...mapState(["user"]),
  },
  mounted() {
    if (this.user == null) {
      this.$dialog
        .alert({
          message: "请先登录",
        })
        .then(() => {
          this.$router.push("/login")
        })
    } else if (this.user.data.gender == 1) {
      this.value = "女士"
    } else {
      this.value = "先生"
    }
  },
  data() {
    return {
      value: "", //从数据库获取用户信息
      showPicker: false,
      columns: ["先生", "女士"],
      //   生日
      date: "1995/07/07", //从数据库获取用户信息
      show: false,
      minDate: new Date(1970, 0, 1),
      maxDate: new Date(2000, 0, 31),
      phone: "",
    }
  },
  methods: {
    showPopup() {
      this.show = true
    },
    sex() {
      axios.post().then()
    },
    // 设置性别
    onConfirm(value) {
      this.value = value
      this.showPicker = false
    },
    // 设置生日
    formatDate(date) {
      return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`
    },
    onConfirmDate(date) {
      this.show = false
      this.date = this.formatDate(date)
    },
  },
  watch: {
    value(newValue, oldValue) {
      if (oldValue != "" && oldValue != newValue) {
        console.log(`性别更改了old=${oldValue},new=${newValue}`)
        const url = "user/gender"
        let params = ""
        if (newValue == "女士") {
          params = `unames=${this.user.data.unames}&gender=1`
        } else {
          params = `unames=${this.user.data.unames}&gender=0`
        }
        this.axios.post(url, params).then(res => {
          console.log(res)
          this.$dialog.alert({
            message: "性别修改成功",
          })
        })
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.body {
  background-color: #f3f4f6;
  width: 100%;
  height: 100vh;
}
.msg {
  margin-top: 3vw;
}
.sex {
  padding: 4vw;
  text-align: center;
  color: #9bd602;
}
.line {
  width: 100%;
  height: 4px;
  background-color: #f3f4f6;
}
.sex.yes {
  color: #000;
}
</style>
